<template>
	<view class="container">
		<!-- 标题 -->
		<uni-nav-bar statusBar="true" :fixed="true" backgroundColor="transparent" :border="false" title="会员等级" color="white" left-icon="left" @clickLeft="backTo"></uni-nav-bar>
		<image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/member/memberBg.png" mode="aspectFill" class="mine-bg"></image>
		
		<view class="mine-header">
			<image :src="info.avatar" mode="aspectFill" class="header-logo"></image>
			<view class="header-info">
				<view class="header-user">
					<view class="h2">{{ info.nickName || '' }}</view>
					<image :src="'https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/member' + configCard[level].icon" mode="aspectFill" class="info_img"></image>
				</view>
				<view class="info-tags" v-if="configCard[cardList.level].isTab">
					{{ cardList.nextGrowRule || ''}}
				</view>
			</view>
			<view class="header-handle">
				<view class="btn-merber" @click="renew">立即续费</view>
				<view class="text-merber">{{ cardList.memberDateStr }}</view>
			</view>
		</view>
		<view class="main">
			<view class="card">
				<view class="card_btn" :style="{ background: backgroundStyle }">
					{{ configCard[cardList.level].text }}
				</view>
				<image :src="'https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/member' + configCard[cardList.level].image" mode="scaleToFill" class="card_img"></image>
			</view>
			<view class="tab-bar" v-if="configCard[cardList.level].isTab">
				<view class="tab-item" @click="changeTab(1)" :class="{ active: cardList.level === 1 }">白莲会员</view>
				<view class="tab-item" @click="changeTab(2)" :class="{ active: cardList.level === 2 }">红莲会员</view>
				<view class="tab-item" @click="changeTab(3)" :class="{ active: cardList.level === 3 }">金莲会员</view>
				<view class="tab-item" @click="changeTab(4)" :class="{ active: cardList.level === 4 }">白荷会员</view>
			</view>
			<view class="content">
				<view class="strategy" :style="{ borderRadius: configCard[cardList.level].isTab ? '0' : '20rpx' }">
					<view class="strategy-title">口腔优惠攻略</view>
					<view class="strategy-item" v-for="(item, index) in configCard[cardList.level].strategies" :key="index">
						<view class="strategy-top">
							<image src="@/static/enterpriseCenter/left.png" mode="aspectFit" class="bar-img"></image>
							<view class="strategy-header">{{ item.title }}</view>
							<image src="@/static/enterpriseCenter/right.png" mode="aspectFit" class="bar-img"></image>
						</view>
						
						<view class="strategy-content">
							<view v-for="(itemContent, index) in item.content" :key="index">{{ itemContent }}</view>
						</view>
					</view>
					<!-- <view class="strategy-item">
						<view class="strategy-header">攻略2：免费洁牙</view>
						<view class="strategy-content">升级成为白莲会员可免费享受价值158元的洁牙一次</view>
					</view>
					<view class="strategy-item">
						<view class="strategy-header">攻略3：攒荷花</view>
						<view class="strategy-content">荷花满塘攒荷花 荷花越多奖励越多</view>
					</view>
					<view class="strategy-item">
						<view class="strategy-header">攻略4：助好友</view>
						<view class="strategy-content">邀请好友享平台奖励，推荐一个白莲好友获平台29.7奖励</view>
					</view> -->
				</view>
				<!-- 其他会员内容 -->
			</view>
		</view>
		<div class="footerBase"></div>
		<div class="footer">
			<div class="footer-button" @click="renew">续费会员</div>
		</div>
	</view>
</template>

<script>
import { configCard } from './config';

export default {
	data() {
		return {
			// 页面数据可以动态绑定
			cardList: {
				level: 1
			},
			configCard,
			currentIndex: 0,
			backgroundStyle: null,
			info: {},
			level: null,
		};
	},
	// computed: {
	//     backgroundStyle() {
	//       const defaultColor = 'rgba(255,255,255,0.13)';
	//       const selectedColor = this.configCard[this.cardList.level]?.color || defaultColor;
	//       return {
	//         background: selectedColor
	//       };
	//     }
	// },
	onLoad() {
		this.$post('/yahe/level/user').then((res) => {
			// this.cardList = res.content;
			this.cardList = res.content;
			this.level = res.content.level
			const defaultColor = 'rgba(255,255,255,0.13)';
			const selectedColor = this.configCard[this.cardList.level]?.color || defaultColor;
			this.backgroundStyle = selectedColor;
		});
	},
	onShow() {
		this.info = uni.getStorageSync('user');
	},
	methods: {
		backTo() {
			if (getCurrentPages().length > 1) {
			    uni.navigateBack({
			        delta: 1 // 返回上一页
			    });
			} else {
			  uni.switchTab({
			  	url: '/pages/index/index'
			  });
			}
		},
		changeTab(index) {
			this.currentIndex = index;
			this.cardList.level = index;
			const defaultColor = 'rgba(255,255,255,0.13)';
			const selectedColor = this.configCard[index]?.color || defaultColor;
			this.backgroundStyle = selectedColor;
		},
		renew() {
			this.$post('/yahe/order/create/level', { type: 1 })
				.then((res) => {
					if (res.success) {
						uni.navigateTo({
							url: `/mineComponentPackage/component/payment?orderId=${res?.content?.orderId}`
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						// uni.hideLoading();
					}
					// else {
					// 	uni.showToast({
					// 		title: '获取失败，请稍后再试',
					// 		icon: 'none'
					// 	});
					// }
				})
				.catch((res) => {
					// uni.hideLoading();
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		}
	}
};
</script>

<style scoped lang="less">
/* 全局样式 */
.container {
	/* padding: 20px; */
	// background: rgba(12, 79, 75);
	// background-color: #091E1C;
	// padding: 40rpx 10rpx;
	background-color: #091e1c;
	// height: 100vh;

	.main {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
		align-items: center;

		.card {
			text-align: center;
			width: 100%;
			position: relative;
			margin-bottom: 40rpx;
			.card_img {
				width: 90%;
				height: 360rpx;
			}
			.card_btn {
				width: auto;
				height: 40rpx;
				padding: 0rpx 30rpx;
				line-height: 40rpx;
				background: rgba(255, 255, 255, 0.13);
				border-radius: 66rpx 66rpx 66rpx 66rpx;
				color: white;
				font-size: 20rpx;
				position: absolute;
				top: 30%;
				z-index: 1;
				left: 11%;
			}
		}
		.tab-bar {
			width: 90%;
			display: flex;
			justify-content: space-around;
			background-color: #0b3738;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			// margin-top: 40rpx;

			// padding: 10rpx 0;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			color: #ffffff;
			font-size: 26rpx;
			padding: 20rpx 0;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			// border-radius: 20px;
			// margin: 0 10rpx;
		}

		.active {
			background: linear-gradient(#138580 0%, #0d6468 100%);
		}

		.content {
			// background-color: #0b3738;
			// height: 600rpx;
			// overflow: scroll;
			width: 90%;
			margin-top: -2rpx;
		}

		.strategy {
			color: #ffffff;
			background-color: #0d6468;

			// border-top-left-radius: 20rpx;
			// border-top-right-radius: 20rpx;
			padding: 20px;
			box-sizing: border-box;
		}

		.strategy-title {
			text-align: center;
			// margin-bottom: 15rpx;
			color: #f0d1a5;
			font-weight: bold;
			font-size: 64rpx;
			margin-bottom: 20rpx;
		}

		.strategy-item {
			background-color: #0d6468;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			.strategy-top {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 14rpx;
				gap: 10rpx;
				.strategy-header {
					
					text-align: center;
					font-weight: bold;
					font-size: 34rpx;
					color: #f0d1a5;
				}
				.bar-img {
					width: 88rpx;
					height: 8rpx;
				}
			}

			

			.strategy-content {
				font-size: 24rpx;
				background-color: #207378;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}
		}
	}

	.mine-bg {
		width: 100%;
		height: 668rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.mine-header {
		display: flex;
		align-items: center;
		// padding: 8rpx 24rpx;
		color: #fff;
		position: relative;
		z-index: 10;
		margin-top: 40rpx;
		width: 90%;
		margin: 0 auto;

		.header-handle {
			display: flex;
			align-items: center;
			flex-direction: column;
			gap: 8rpx;

			.btn-merber {
				width: 136rpx;
				height: 52rpx;
				background: linear-gradient(270deg, #e5ae78 0%, #ffebcd 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 22rpx;
				color: #3a3a3a;
				line-height: 52rpx;
				text-align: center;
			}

			.text-merber {
				font-size: 22rpx;
				color: #bfe1e1;
			}

			.button {
				margin: 0 28rpx;
				line-height: 1;
				padding: 0;
			}

			.img {
				width: 64rpx;
				height: 64rpx;
				display: block;
			}
		}

		.header-logo {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
			// border: 4rpx solid rgba(255, 255, 255, 0.4);
		}

		.header-info {
			// flex: 1;
			margin-left: 22rpx;
			margin-right: auto;
			display: flex;
			// align-items: center;
			flex-direction: column;
			.header-user {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.h2 {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}
			.info_img {
				width: 86rpx;
				height: 30rpx;
			}
			.info-tags {
				margin-top: 8rpx;
				display: flex;
				align-items: center;
				font-size: 20rpx;
			}
		}
	}
}

/* 头部样式 */
.header {
	text-align: center;
	margin-bottom: 20px;
}

.header .title {
	font-size: 24px;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

.header .subtitle {
	font-size: 18px;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.header .info {
	font-size: 14px;
	color: #666;
}

/* 内容部分样式 */
// .content {
// 	background-color: #fff;
// 	padding: 15px;
// 	border-radius: 8px;
// 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
// }

/* 每个部分的样式 */
.section {
	margin-bottom: 20px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

.section-text {
	font-size: 14px;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

/* 绿色莲米应用场景样式 */
.scenes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.scene {
	background-color: #f0f0f0;
	padding: 8px 12px;
	border-radius: 20px;
	font-size: 14px;
	color: #333;
}

.image-container {
	/* 容器高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}

.responsive-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 保持宽高比并填充容器 */
}
.footerBase {
	height: 210rpx;
}

.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 210rpx;
	background: rgba(12, 74, 79, 1);

	.footer-button {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(90deg, #fecba1 0%, #fce7d2 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #4b2711;
		text-align: center;
	}
}
</style>
